<template>
  <div class="box-b">
    三级 - 子组件B
    <button @click="setColorVal">修改 provide 的值</button>
  </div>
</template>

<script setup lang="ts">
import { type Ref, inject } from "vue";

const colorVal = inject<Ref<string>>("color");

const setColorVal = () => {
  colorVal!.value = "pink";
};
</script>

<style scoped>
.box-b {
  width: 100%;
  margin: 10px 0;
  padding: 24px;
  color: #fff;
  border: 2px solid #eee;
  background: v-bind(colorVal);
}
</style>
